<template>
  <div class="kk">
    <!-- 头部 -->
    <div>
      <el-header style="height: auto">
        <div class="header">
          <div class="header_c">
            <el-row type="flex" justify="start" align="middle">
              <el-col :span="6">
                <a href="" class="logo"> </a>
              </el-col>
              <el-col :span="10" :offset="2"></el-col>
              <el-col :span="6" :offset="3" class="avatar-box">
                <router-link to="/space">
                  <el-avatar
                    style="vertical-align: middle"
                    shape="square"
                    size="medium"
                    src=""
                  ></el-avatar>
                </router-link>
                <router-link to="/space" class="user-name"></router-link>
                <router-link to="/create" class="collection"
                  >发布菜谱
                </router-link>
                <a href="javascript:;" class="collection">退出</a>
              </el-col>
              <el-col :span="6" :offset="3" class="avatar-box">
                <router-link to="/login" class="user-name">登录 </router-link>
                <router-link to="/register" class="collection"
                  >注册</router-link
                >
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="nav-box">
          <div class="nav_c">
            <el-menu
              :default-active="'1'"
              class="el-menu-demo"
              mode="horizontal"
              :unique-opened="true"
            >
              <el-menu-item index="1">
                <router-link class="nav-link" to="/pageFirst">首页</router-link>
              </el-menu-item>
              <el-menu-item index="2">
                <router-link class="nav-link" to="/recipe"
                  >菜谱大全</router-link
                >
              </el-menu-item>
            </el-menu>
          </div>
        </div>
      </el-header>
    </div>
    <div>
        <router-view/>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.kk{
  background-color: #d8d6bd;
}
.header {
  height: 129px;
  background-color: #c90000;
}

.logo {
  display: block;
  height: 129px;
  width: 184px;
  background: url(https://s1.c.meishij.net/n/images/logo2.png) -15px 9px no-repeat;
}

.header_c,
.nav_c {
  width: 990px;
  margin: 0 auto;
}

.nav-box {
  height: 60px;
  background-color: #fff;
  box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.3);
}

.user-name {
  margin-left: 5px color #fff;
  color: #fff;
  font-size: 5px;
}

.collection {
  margin-left: 5px color #fff;
  color: #fff;
  font-size: 10px;
}
</style>